<template>
    <div  :class="{'lovePage':loadOver}" class="loveIndex">
        <div>
            <ul class="navs-title">
                <li v-for="(item,index) in navList" :key="index" :class="status==item.id?'status':'' " @click="tabClick(item.id)"
                    :data-status="item.id">{{item.class_name}}
                </li>
            </ul>
        </div>
        <Loading  v-if="notMore"  class="empty-text-wrap" />
        <mu-paper :z-depth="1" class="demo-loadmore-wrap">
            <mu-container ref="container" class="demo-loadmore-content">
                <mu-load-more @load="load" :loading="loading">
                    <div class="love_box">
                        <div class="love_news_list" v-for="(item,index) in loveList" :key="index"
                             @click="toLoveDetails(item.id,item.type)">
                            <div class="love_news_title">{{item.title}}</div>
                            <div class="love_news_source"><img :src=item.head_photo alt="">{{item.org_name}}-{{item.name}}</div>
                            <div class="love_news_info">
                                <span class="love_news_num"><img src="@as/img/eyes.png" alt="">{{item.views}}人看过</span>
                                <span class="love_news_time">{{item.create_time | time }}</span>
                            </div>
                        </div>
                    </div>
                </mu-load-more>
            </mu-container>
        </mu-paper>
        <div class="loading" v-if="loadOver" :class="{'notPageOne':p>1||loveList.length<6}">{{loaded}}</div>
    </div>
</template>

<script>
    import Loading from '@/components/emptyText.vue';
    import {mapState} from 'vuex';
    export default {
        data() {
            return {
                listData: [],
                num: 10,
                p: 1,
                loading: false,
                loaded: "加载更多...",
                notMore: false,
                method: "",
                status: '',
                navList: [],//二级分类
                loveList: [],
                loadOver:false,
            }
        },
        components:{
            Loading
        },
        computed:{
            ...mapState({
                sub_class_obj:state =>state.initNews.sub_class_obj,
                selectedId:state =>state.initNews.sub_class_obj.selectedId,
            }),
        },
        mounted() {
            this.$progress.done();
            // this.seniorNav();
            this.getNavList(this.p);
        },
        methods: {
            toLoveDetails(id,type) {
                this.$router.push({path: "details/loveDetails", query: {id,type}})
            },
            getModelCloumn(){
                // console.log(this.$store.commit.changeSubNav)
                this.$store.state.initNews.Navsenior.Navsenior.forEach((el,index)=>{
                    if(this.$store.state.initNews.selectName.selectName ==el.class_name){
                        this.$store.commit('changeSubNav',{
                            class_id:  this.$store.state.initNews.Navsenior.Navsenior[index].id,
                            status: this.$store.state.initNews.Navsenior.Navsenior[index].status,
                            selectedId: this.selectedId
                        })
                    }
                });
            },
            /*
          * 副导航列表
          * */
            getNavList() {
                if(this.$store.state.initNews.selectName.selectName){
                   //应用中心进入
                    this.getModelCloumn();
                    this.$http
                        .get("app/My/second_class", {
                            class_id: this.status,
                            status: 4,
                            uid: JSON.parse(Cookies.get("user_71ydj")).id,
                            org_id:JSON.parse(Cookies.get("user_71ydj")).organization_id,
                        })
                        .then(res => {
                            this.navList = res.data;
                            if(res.data){
                                if(res.data[0]&&res.data[0].id){
                                    this.status = res.data[0].id;
                                    this.initData(this.p,res.data[0].id);
                                }else{
                                    this.notMore =true;
                                }
                            }
                        });
                }else{
                    this.$http
                        .get("app/My/second_class", {
                            class_id: this.status,
                            status: 4,
                            uid: JSON.parse(Cookies.get("user_71ydj")).id,
                            org_id:JSON.parse(Cookies.get("user_71ydj")).organization_id,
                        })
                        .then(res => {
                            this.navList = res.data;
                            if(res.data){
                                if(res.data[0]&&res.data[0].id){
                                    this.status = res.data[0].id;
                                    this.initData(this.p,res.data[0].id);
                                }else{
                                    this.notMore =true;
                                }
                            }else {
                                this.notMore =true;
                            }
                        });
                }


            },
            /*
            * 副导航切换
            */
            tabClick(e) {
                this.status = e;
                this.p=1;
                this.loadOver=false;
                this.notMore =false;
                this.loveList =[];
                this.initData(this.p,this.status);
            },


            toSearch() {
                this.$router.push({path: "details/search", query: {type: 1}})
            },
            initData(p,class_id) {
                this.$http
                    .get("app/redstar/index", {
                        p: p,
                        page: 6,
                        class_id,
                        uid: JSON.parse(Cookies.get("user_71ydj")).id,
                        org_id:JSON.parse(Cookies.get("user_71ydj")).organization_id,
                    })
                    .then(res => {
                        if(res.data.length){
                            this.loveList.push(...res.data);
                        }
                        this.loadOver =false;
                        if(p!=1){
                            console.log(res.data);
                            if(res.data.length){
                            }else{
                                this.loadOver =true;
                                this.loading =false;
                                this.loaded='没有更多数据了'
                                return false
                            }
                        }else {
                            if(!res.data.length){
                                this.notMore =true;
                                this.loadOver =false;
                            }else{
                                if(res.data.length<6&&res.data.length!=0){
                                    this.loadOver =true;
                                    this.loaded='没有更多数据了'
                                }
                            }
                        }
                    });
            },
            load() {
                //因为load 触发多次 所以做分时节流
                if (!this.loadOver) {
                    this.loading = true;
                    clearTimeout(this.method);
                    this.method = setTimeout(() => {
                        this.p = this.p + 1;
                        this.initData(this.p,this.status);
                        this.loading =false;
                    }, 1500);
                }
            },
        },
    }
</script>

<style scoped>
    .loveIndex .empty-text-wrap{
        width: 100%;
        height: 40vh;
        margin-top: 100px;
    }
    .navs-title::-webkit-scrollbar {
        display: none;
    }

    .navs-title {
        width: 359px;
        max-height: 28px;
        overflow-x: auto;
        /*overflow-y: hidden;*/
        white-space: nowrap;
        margin-left: 16px;
        display: flex;
        margin-top: 15px
    }

   .loveIndex .navs-title li {
        display: inline-block;
        height: 28px;
        box-sizing: border-box;
        line-height: 28px;
        border-radius: 10rem;
        font-size: 12px;
        color: #999999;
        padding: 0 13px;
        background: #F8F8F8;
        margin-right: 8px;
    }

    .navs-title li.status {
        color: #EB4D44;
    }
    .love_box{
        margin-bottom: 10px;
        padding: 0 16px;
        box-sizing: border-box;
        -webkit-box-sizing: border-box;
    }

    .lovePage {
        /*margin-bottom: 69px;*/
    }
    .love_news_list {
        width: 100%;
        max-height: 141px;
        box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.08);
        border-radius: 4px;
        margin-top: 15px;
        /*margin: 15px 16px 0;*/
        display: inline-block;
        /*box-sizing: border-box;*/
        /*-webkit-box-sizing: border-box;*/
    }

    .love_news_title {
        font-size: 16px;
        color: #333333;
        line-height: 24px;
        max-height: 48px;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        margin: 19px 16px 0;
    }

    .love_news_source {
        font-size: 12px;
        color: #333333;
        margin: 0 16px 0;
    }

    .love_news_source img {
        width: 25px;
        height: 25px;
        margin-right: 8px;
        position: relative;
        top: 5px;
        border-radius: 50%;
    }

    .love_news_info {
        width: 100%;
        font-size: 12px;
        color: #999;
        margin: 10px 0;
        display: inline-block;
    }

    .love_news_info .love_news_num {
        float: left;
        margin-left: 16px;
    }

    .love_news_num img {
        width: 13px;
        height: 11px;
        display: inline-block;
        margin-right: 6px;

    }

    .love_news_info .love_news_time {
        float: right;
        margin-right: 15px;
    }

    .loading {
        width: 343px;
        margin: 0 16px ;
        font-size: 14px;
        color: #dddddd;
        clear: both;
        line-height: 61px;
        text-align: center;
    }
    .loading.notPageOne{
        margin-top: -10px;
    }
    .loveIndex{
        width: 100%;
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        /*background: red;*/
    }
    .loveIndex /deep/ .container{
        padding: 0;
    }
    .mu-load-more /deep/ .mu-circle-spinner{
        border-color: #e5e5e5;
    }
    .lovePage /deep/ .mu-infinite-scroll{
        display: none;
        height: 0;
    }
    .loveIndex /deep/.mu-elevation-1{
        box-shadow: 0 0.05333rem 0.02667rem -0.02667rem rgba(0,0,0,0), 0 0.02667rem 0.02667rem 0 rgba(0,0,0,0), 0 0.02667rem 0.08rem 0 rgba(0,0,0,0); ;
        -webkit-box-shadow:0 0.05333rem 0.02667rem -0.02667rem rgba(0,0,0,0), 0 0.02667rem 0.02667rem 0 rgba(0,0,0,0), 0 0.02667rem 0.08rem 0 rgba(0,0,0,0); ;
    }

</style>